<template>
    <div class="box">
        <div class="header iconfont">
            <span class="ico" @click="clickclose()">&#xe627;</span>
            <div class="head">
                <img src="/libs/imgs/member_avatar_2x.png" alt="">
            </div>
            <p class="username">username</p>
        </div>
        <div class="order">
            <div class="orderInfo">
                <span>我的订单</span>
                <span @click="myorder">查看全部订单</span>
            </div>
            <div class="orderInfo2">
                <ul class="iconfont">
                    <li>
                        <span>
                            &#xe605;
                        </span>
                        待付款
                        <div class="num">
                            0
                        </div>
                    </li>
                    <li>
                        <span>
                            &#xe606;
                        </span>
                        待发货
                        <div class="num">
                            0
                        </div>
                    </li>
                    <li>
                        <span>
                            &#xe60c;
                        </span>
                        待收货
                        <div class="num">
                            0
                        </div>
                    </li>
                    <li>
                        <span>
                            &#xe603;
                        </span>
                        退货退款
                        <div class="num">
                            0
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <ul class="ul iconfont">
            <li class="jidan" @click="jidan">
                <div class="le">
                    <span>
                        &#xe61b;
                    </span>
                    <span>
                        我的集单
                    </span>
                </div>
                <div class="ri">
                    &#xe65b;
                </div>
            </li>
            <li @click="word">
                <div class="le">
                    <span>
                        &#xe619;
                    </span>
                    <span>
                        收货地址
                    </span>
                </div>
                <div class="ri">
                    <span>管理地址信息</span>
                    &#xe65b;
                </div>
            </li>
            <li @click="redpaper">
                <div class="le">
                    <span>
                        &#xe603;
                    </span>
                    <span>
                        卡券包
                    </span>
                </div>
                <div class="ri">
                    <span>红包</span>
                    &#xe65b;
                </div>
            </li>
        </ul>
        <ul class="ul iconfont">
            <li>
                <div class="le">
                    <span>
                        &#xe609;
                    </span>
                    <span>
                        账户余额
                    </span>
                </div>
                <div class="ri">
                    &#xe65b;
                </div>
            </li>
            <li>
                <div class="le">
                    <span>
                        &#xe606;
                    </span>
                    <span>
                        支付密码
                    </span>
                </div>
                <div class="ri">
                    <span>设置、管理支付密码</span>
                    &#xe65b;
                </div>
            </li>
        </ul>
        <ul class="ul iconfont ulbot">
            <li>
                <div class="le">
                    <span>
                        &#xe604;
                    </span>
                    <span>
                        联系电话
                    </span>
                </div>
                <div class="ri">
                    <span>400-088-0692</span>
                    &#xe65b;
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    methods:{
        myorder(){
            this.$router.push('/myself/myorder')
        },
        jidan(){
            this.$router.push('/myself/jidan')
        },
        word(){
            this.$router.push('/myself/word')
        },
        redpaper(){
            this.$router.push('/myself/redPaper')
        },
        clickclose(){
            this.$router.push('/myself/close')
        },
    }
}
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 1669649 */
  src: url('//at.alicdn.com/t/font_1669649_5djoj4ajrwf.eot');
  src: url('//at.alicdn.com/t/font_1669649_5djoj4ajrwf.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1669649_5djoj4ajrwf.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1669649_5djoj4ajrwf.woff') format('woff'),
  url('//at.alicdn.com/t/font_1669649_5djoj4ajrwf.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1669649_5djoj4ajrwf.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

.box{
    background: rgb(238, 238, 238);
    // height: 100%;
    padding-bottom: 50px;
}
.header{
    width: 100%;
    height: 200px;
    background: url('/libs/imgs/bg_gerenzhongxinbeijing.png');
    background-size: cover;
    position: relative;
    .ico{
        position: absolute;
        right: 20px;
        top: 15px;
        color: #fff;
        font-size: 25px;
    }
    .head{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        // background: red;
        position: absolute;
        left: 50%;
        top: 43%;
        transform: translate(-50%,-50%);
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
        }
    }
        .username{
            font-size: 20px;
            position: absolute;
            left: 50%;
            top: 75%;
            transform: translate(-50%,-50%);
            font-size: 18px;
            color: #fff;
        }
}
.order{
    height: 125px;
    width: 100%;
    margin-bottom: 10px;
    background: #fff;
    .orderInfo{
        height: 50px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        padding-left: 10px;
        padding-right: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        :nth-child(1){
            font-size: 15px;
        };
        :nth-child(2){
            font-size: 15px;
            color: rgb(168, 167, 167);
        };
    };
    .orderInfo2{
        height: 75px;
        ul{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 15px;
            padding-right: 15px;
            box-sizing: border-box;
            li{
                height: 100%;
                width: 25%;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                position: relative;
                span{
                    width: 28px;
                    height: 28px;
                    text-align: center;
                    line-height: 28px;
                    font-size: 28px;
                    margin-bottom: 3px;
                };
                .num{
                    width: 20px;
                    height: 20px;
                    background: red;
                    line-height: 20px;
                    text-align: center;
                    color: #fff;
                    position: absolute;
                    right: 10px;
                    top: 5px;
                    border-radius: 5px;
                    border: 1px solid #ccc;
                }
            }
        }
    }
}
.ul{
    background: #fff;
    margin-bottom: 10px;
    li{
        height: 50px;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
        display: flex;
        padding-left: 15px;
        padding-right: 15px;
        justify-content: space-between;
        align-items: center;
        .le{
            :nth-child(1){
            margin-right: 10px;
            font-size: 20px;
            }
        }
        .ri{
            span{
                color: rgb(185, 185, 185);
                font-size: 16px;
            }
        }
        
    }
}
.ulbot{
    margin-bottom: 0px;
}
</style>
